/*
 * @Author: xuguopeng Gp.Xu@budweiserapac.com
 * @Date: 2024-01-03 16:23:46
 * @LastEditors: xuguopeng Gp.Xu@budweiserapac.com
 * @LastEditTime: 2024-01-04 15:41:19
 * @FilePath: \iws-batch\src\pages\sales-achieve-rate-trend\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import styles from './index.module.less';

const getOption = () => ({
  // title: {
  //   text: '销量达成率趋势',
  //   textStyle: {
  //     color: '#ce0e2d',
  //   },
  // },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['总销量', '超高端', '高端', '中高端', '中低端'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '2022.10',
      '2022.11',
      '2022.12',
      '2023.01',
      '2023.02',
      '2023.03',
      '2023.04',
      '2023.05',
      '2023.06',
      '2023.07',
      '2023.08',
      '2023.09',
    ],
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%',
    },
  },
  series: [
    {
      name: '总销量',
      type: 'line',
      data: [8, 99, 11, 104, 90, 13, 102, 0, 99, 11, 10, 90, 13, 102],
      itemStyle: {
        color: '#7A7AE5',
      },
    },
    {
      name: '超高端',
      type: 'line',
      data: [90, 95, 5, 83, 85, 9, 88, 90, 95, 8, 83, 85, 9, 88],
      itemStyle: {
        color: '#4191F6',
      },
    },
    {
      name: '高端',
      type: 'line',
      data: [88, 99, 88, 7, 95, 88, 99, 8, 99, 88, 7, 95, 88, 99],
      itemStyle: {
        color: '#80D2AC',
      },
    },
    {
      name: '中高端',
      type: 'line',
      data: [85, 95, 88, 98, 11, 95, 90, 85, 9, 88, 98, 101, 95, 9],
      itemStyle: {
        color: '#F0C26D',
      },
    },
    {
      name: '中低端',
      type: 'line',
      data: [80, 90, 95, 10, 95, 98, 97, 80, 9, 95, 100, 95, 8, 97],
      itemStyle: {
        color: '#E77D98',
      },
    },
  ],
});

export const LineRateTrend = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);
    myChart.clear();
    const option = getOption();
    myChart.setOption(option);

    return () => {
      myChart.dispose(); // 在组件卸载时清理echarts实例
    };
  }, []);

  return (
    <div className={styles.lineRateTrend}>
      <div className={styles.title}>兑换率趋势</div>
      <div ref={chartRef} style={{ width: '100%', height: '300px' }} />
    </div>
  );
};
